<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .checkBox{
            width: 24px;
            height: 24px;
            border: 2px solid rgba(51, 51, 51, .24);
            border-radius: 20px;
            box-sizing: border-box;
            cursor: pointer;
            margin-right: 60px;
            position: relative;
            display: flex;
            align-items: center;
        }
        .active{
            background: #FFE60F;
            border: none;
            position: relative;
        }
        .active::before {
            content: "";
            display: block;
            width: 4px;
            height: 10px;
            position: absolute;
            right: 7px;
            bottom: 7px;
            border: 2px solid rgba(51, 51, 51, 1);
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
        }
        .box{
            width: 100%;
            display: flex;
            align-items: center;
        }
        span{
            position: absolute;
            right: -40px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    let box = document.querySelector('.box');
    let list = ['恭喜','发财','身体','健康','平安','喜乐'];
    list.forEach(el=>{
        let d = document.createElement('div');
        d.className = 'checkBox';
        d.innerHTML = `<span>${el}</span>`;
        box.appendChild(d)
    })
    let checkBoxList = document.querySelectorAll('.checkBox');
    let arr = [];
    checkBoxList.forEach((el,i)=>{
        arr.push(i)
        el.addEventListener('click',()=>{
            arr.forEach(e=>{
                if(e!=i){
                    checkBoxList[e].classList.remove("active");
                }
            })
            el.classList.add("active");
        })
    })
</script>
</html>